<template>
  <div class="container">
    <!-- <div>
        <Breadcrumb separator=">">
        <span>当前位置：</span>
            <Breadcrumb-item href="/">首页</Breadcrumb-item>
            <Breadcrumb-item>贷款产品</Breadcrumb-item>
            <Breadcrumb-item>贷款产品详情</Breadcrumb-item>
        </Breadcrumb>
    </div> -->
    <div class="product-intro marginT20">
        <Row>
            <i-col span='8'><span><img :src="banner" alt="" width="100%" height="320px"></span></i-col>
            <i-col span='16'>
                <Row class="marginT20">
                    <i-col span='7' offset='4'>
                        <p><span class="company-name">{{productName}}</span><span class="bank-desc">{{orgName}}</span></p>
                    </i-col>
                    <!-- <i-col span='2'>
                        <span>工商银行</span>
                    </i-col> -->
                    <i-col span='2' offset='9'>
                        <span><img :src="collectImg" alt="" style="vertical-align:top;"><span style="display:inline-block;font-size:17px;color:#00A573;margin-top:5px">收藏</span></span>
                    </i-col>
                </Row>
                <div style="text-align:center" class="marginT50">
                    <Row class="marginT20">
                        <i-col span='4' offset='4'>
                            <span class="interest-rate">{{loanRateDown}}%~{{loanRateUp}}%</span>
                        </i-col>
                        <i-col span='4' offset='2'>
                            <span><em>{{loanAmount}}</em>万</span>
                        </i-col>
                        <i-col span='2' offset='5'>
                            <span><em>{{loanPeriodUp}}</em>年</span>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col span='4' offset='4'>
                            <span>贷款利率</span>
                        </i-col>
                        <i-col span='4' offset='2'>
                            <span>最高贷款额度</span>
                        </i-col>
                        <i-col span='2' offset='5'>
                            <span>贷款期限</span>
                        </i-col>
                    </Row>
                    <Row class="button-margin">
                        <i-col span='4' offset='9'>
                            <span><i-button @click="goLoan" type="success">立即申请</i-button></span>
                        </i-col>
                    </Row>
                </div>
            </i-col>
        </Row>
    </div>


    <div class="marginT20">
        <Card>
            <p slot="title">产品详情</p>
            <p class="marginT20">
                <Row>
                    <i-col span='3'>产品介绍</i-col>
                    <i-col span='20'><span v-html='productDesc' ></span></i-col>
                </Row>
            </p>
            <!-- <p class="marginT20">
                <Row>
                    <i-col span='3'>适用对象</i-col>
                    <i-col span='20'>啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊</i-col>
                </Row>
            </p>
            <p class="marginT20">
                <Row>
                    <i-col span='3'>产品特点</i-col>
                    <i-col span='20'>啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊</i-col>
                </Row>
            </p>
            <p class="marginT20">
                <Row>
                    <i-col span='3'>贷款条件</i-col>
                    <i-col span='20'>
                        <p>啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊</p>
                        <p class="marginT20">啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊</p>
                        <p class="marginT20">啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊</p>
                        <p class="marginT20">啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊啊还是嗲话大四啊</p>
                    </i-col>
                </Row>
            </p> -->
            <p class="marginT20">
                <Row>
                    <i-col span='3'>金融机构介绍</i-col>
                    <i-col span='20'>{{bankDesc}}</i-col>
                </Row>
            </p>
        </Card>
    </div>




  </div>
</template>

<script>
import banner from '@/assets/images/banner.png'
import collectImg from '@/assets/images/collect.png'

export default {
    data(){
        return{
            banner:banner,
            collectImg:collectImg,
            orgId:'',
            productName:'',
            orgName:'',
            loanRateDown:'',
            loanRateUp:'',
            loanAmount:'',
            loanPeriodUp:'',
            productDesc:'',
            bankDesc:''
        }
    },
    mounted(){
        this.productDetail()
    },
    methods:{
        //立即申请
        goLoan(){
            this.$axios('companyMsggetEntinfo',[],{
                userPhone:this.$token.getUUID()
            }).then(res=>{
                console.log(res)
                if(JSON.stringify(res.data.entInfo) == "{}"){
                    this.$router.push({
                        path:'legalPerson',
                    })
                }else{
                    this.$router.push({
                        path:'companyMsg',
                        query:{
                            productId:this.$route.query.productId,
                            orgCode:this.orgId
                        }
                    })
                }
                
            })
            
        },
        //产品详情
        productDetail(){
            this.$axios('getProductsgetProduct',[this.$route.query.productId],{
                userPhone:this.$token.getUUID()
            }).then(res=>{
                console.log(res)
                this.orgId=res.data.result.orgId
                this.productName=res.data.result.productName
                this.orgName=res.data.result.orgName
                this.loanRateDown=res.data.result.loanRateDown
                this.loanRateUp=res.data.result.loanRateUp
                this.loanAmount=res.data.result.loanAmount
                this.loanPeriodUp=res.data.result.loanPeriodUp
                this.productDesc=res.data.result.productDesc
                this.bankDesc=res.data.result.bankDesc
            })
        },
    }
}
</script>

<style scoped>
/* .container{
    padding: 20px 0;
    background-color: #F8F9FA;
} */
.product-intro{
    padding: 15px;
    box-shadow: 0 0 3px #ccc;
    background-color: #fff;
}
.button-margin{
    margin-top: 80px;
}
.company-name{
    font-size: 24px;
    font-weight: 700;
}
.bank-desc{
    display: inline-block;
    padding: 1px;
    background:#ccc;
    color: #00A573;
    border-radius:5px;
    font-size: 12px;
    margin-left: 10px;
    margin-top: -5px;
}
.desc-msg{
    color: #999999;
    font-size: 15px;
}
.interest-rate{
    font-size: 27px;
    font-weight: 700;
    color: #FF604F;
}
em{
    font-size: 27px;
    font-weight: 700;
}
</style>